<template>
  <div class="main-content">
    <!-- 引导条 -->

    <div class="main-step-container">
      <el-steps
        :active="step_active"
        align-center
        class="main-step"
        finish-status="success"
      >
        <el-step title="填报须知" />
        <el-step title="情形引导" />
        <el-step title="条件预检" />
        <el-step title="智能填表" />
        <el-step title="材料提交" />
        <el-step title="申报完成" />
      </el-steps>
    </div>

    <!-- 办事指南 -->
    <div class="top_box" v-if="step_active == 0">
      <div class="gg" @click="openNewPage('bszn')">
        <img
          data-v-0cd27c2b=""
          src=""
          alt=""
        />
        <div class="text">办事指南</div>
      </div>
      <div class="gg" @click="openNewPage('zcgg')">
        <img
          src=""
          alt=""
        />
        <div class="text">政策公告</div>
      </div>
      <div class="gg">
        <img
          src=""
          alt=""
        />
        <div class="text" @click="openNewPage('cjwt')">常见问题</div>
      </div>
    </div>

    <!-- 填报须知 -->
    <div class="tbxz" v-if="step_active == 0">
      <el-container class="tbxz-container">
        <el-header class="tbxz-header">填报须知</el-header>
        <el-main class="xz-content">
          <app-tbxz />
        </el-main>
        <el-footer class="tbxz-footer">
          <el-checkbox
            class="item"
            v-model="is_read"
            label="我已阅读以上填报须知"
          />
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doNextStep"
            type="primary"
            >进入填报</el-button
          >
        </el-footer>
      </el-container>
    </div>

    <!-- 情形引导 -->
    <div class="tbxz" v-if="step_active == 1">
      <el-container class="tbxz-container">
        <!-- <el-header class="tbxz-header hide">教育入学“一件事”</el-header> -->
        <el-main class="">
          <app-qxyd @transSelectSblx="selectSblx" />
        </el-main>
        <el-footer class="tbxz-footer">
          <el-button
            :disabled="!qxyd_is_ok"
            class="item"
            @click="handleSelectArea"
            type="primary"
            >进入填报</el-button
          >
        </el-footer>
      </el-container>
    </div>
    <!-- 条件预检 -->
    <div class="tbxz" v-if="step_active == 2">
      <el-container class="tbxz-container">
        <!-- <el-header class="tbxz-header hide">教育入学“一件事”</el-header> -->
        <el-main class="">
          <app-tjyj />
        </el-main>
        <el-footer class="tbxz-footer prenext">
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doPreStep"
            type="default"
            >上一步</el-button
          >
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doNextStep"
            type="primary"
            >下一步</el-button
          >
        </el-footer>
      </el-container>
    </div>
    <!-- 智能填表 -->
    <div class="tbxz" v-if="step_active == 3">
      <el-container class="tbxz-container" v-loading="zntbLoading">
        <!-- <el-header class="tbxz-header hide">教育入学“一件事”</el-header> -->
        <el-main class="">
          <app-zntb
            :selectArea="selectedArea"
            :selectSblx="sblx"
            :tbbh="registerBh"
            :userId="registerId"
            :completeOk="completeOk"
            @ljtb="handleLjtb"
          />
        </el-main>
        <el-footer class="tbxz-footer prenext">
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doPreStep"
            type="default"
            >上一步</el-button
          >
          <el-button
            :disabled="!is_read"
            v-if="completeOk"
            class="item"
            @click="doNextStep"
            type="primary"
            >下一步</el-button
          >
        </el-footer>
      </el-container>
    </div>
    <!-- 材料提交 -->
    <div class="tbxz" v-if="step_active == 4">
      <el-container class="tbxz-container">
        <!-- <el-header class="tbxz-header hide">教育入学“一件事”</el-header> -->
        <el-main class="">
          <app-cltj
            :selectArea="selectedArea"
            :userId="registerId"
            :tbbh="registerBh"
            :areaRegisterNo="areaRegisterNo"
          />
        </el-main>
        <el-footer class="tbxz-footer prenext">
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doPreStep"
            type="default"
            >上一步</el-button
          >
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doNextStep"
            type="primary"
            >下一步</el-button
          >
        </el-footer>
      </el-container>
    </div>

    <!-- 申报完成 -->
    <div class="tbxz" v-if="step_active == 5">
      <el-container class="tbxz-container">
        <!-- <el-header class="tbxz-header hide">教育入学“一件事”</el-header> -->
        <el-main class="">
          <app-sbwc
            :selectArea="selectedArea"
            :areaRegisterNo="areaRegisterNo"
            :registerNoStatus="registerNoStatus"
            :bjbh="bjbh"
            @goToFirst="handleGoToFirst"
          />
        </el-main>
        <el-footer class="tbxz-footer prenext">
          <el-button
            :disabled="!is_read"
            class="item"
            @click="doPreStep"
            type="default"
            >上一步</el-button
          >
          <!-- <el-button
            :disabled="!is_read"
            class="item"
            @click="doNextStep"
            type="primary"
            >下一步</el-button
          > -->
        </el-footer>
      </el-container>
    </div>

    <!-- 通用对话框 -->
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :width="dialogWidth"
      :showClose="dialogShowClose"
      :showControl="dialogShowControlBtn"
    >
      <app-sbqy
        v-if="dialogType == 1"
        ref="appSbqy"
        :area-list="areaList"
        @cancel="cancel"
        @onAreaSelectedHandle="areaSelectedHandle"
      />
      <app-zntb-iframe
        v-if="dialogType == 2"
        ref="appZntbIframe"
        :src="iframeUrl"
        :showControl="true"
        @onCompleteIframeFormEvent="onCompleteIframeFormHandle"
        @cancel="cancel"
        @confirm="confirm"
      />
      <!-- <print-assets v-if="dialogType == 3" :list="selectedItems" @cancel="cancel" /> -->
    </Dialog>

    <!-- 添加或修改巡更任务对话框
    <Dialog v-model="showProcessDialog" :title="dialogTitle" width="60%">
      <edit-task ref="editTask" @cancel="cancel" @confirm="confirm" />
    </Dialog> -->
  </div>
</template>
<script setup>
import { nextTick, reactive, ref } from "vue";
import { useTransition, TransitionPresets } from "@vueuse/core";
import {
  AppTbxz,
  AppQxyd,
  AppTjyj,
  AppZntb,
  AppCltj,
  AppSbwc,
  AppSbqy,
  AppZntbIframe,
} from "../../rxsblayout/components";
import { getAllAreas, getAllSblx, saveRegisterInfo } from "@/api/rxsb/rxsb";
import useZwwUserStore from "@/store/modules/zwwUser";

import { useRoute } from "vue-router";
import { onMounted } from "vue";
// import router from "@/router";

//获取集成登录回跳回来后的参数
const route = useRoute();
const userinfo = ref("");
const from = ref("");
const zwwUserStore = useZwwUserStore();
const zntbLoading = ref(false);

//页面加载时加载登录参数
onMounted(() => {
  // 从 route.query 中获取参数
  if (route.query.userinfo) {
    userinfo.value = route.query.userinfo;
    from.value = route.query.from;

    // 打印查询参数
    console.log("Query String 参数:", route.query);

    if (userinfo.value) {
      zwwUserStore.login(userinfo.value);
    }
  }
});

//是否阅读了申报条件
const is_read = ref(false);
const step_active = ref(0);
//选择的申报类型
const qxyd_is_ok = ref(false);
const sblx = ref(null);
const selectedArea = ref(null);

//弹窗控制   1 选择申报区域  2 智能填表内嵌页面  3打印
const showDialog = ref(false);
const dialogTitle = ref("");
const dialogType = ref();
const dialogWidth = ref("50%");
const dialogShowClose = ref(true);
const dialogShowControlBtn = ref(false);
const registerBh = ref("");
const registerId = ref("");
const areaRegisterNo = ref("");
const bjbh = ref("");
const registerNoStatus = ref(1);
const thirdRegsiterInfo = ref();

const completeOk = ref(false);

//申报区域
const areaList = ref([]);

//#region 公共事件
const doPreStep = () => {
  //如果是情形引导，那么需要选择区域

  //如果是当前第二步退回第一步
  if (step_active.value == 2) {
    qxyd_is_ok.value = false;
  }

  //如果是第三步退回第二步

  //如果是第四步退回第三步

  //如果是第五步退回第四步

  step_active.value--;
};

//检查是否登录政务网
const checkIfLoginZww = () => {
  const user_info = zwwUserStore.getInfo();
  if (!user_info) {
    return false;
  }

  return true;
};

const doNextStep = () => {
  if (!checkIfLoginZww()) {
    window.location.href = import.meta.env.VITE_UIAS_LOGIN_URI;
    return;
  }

  //如果是从情形引导进行入条件预检，那么需要弹窗选择区域
  if (step_active.value == 1) {
    handleSelectArea();
  }

  //如果是从条件预检，进入到智能填表，首先要检查获取的参数是否正确
  if (step_active.value == 2) {
    //handleZntb();
  }

  step_active.value++;
};

// 取消按钮
const cancel = () => {
  showDialog.value = false;
  dialogTitle.value = "";
};

const confirm = (data) => {
  cancel();
  //   getList()
};

const areaSelectedHandle = (data) => {
  cancel();
  console.log("select area is:" + data.area);
  if (data.area) {
    selectedArea.value = data.area;
    step_active.value++;
  }
};

const handleGoToFirst= ()=>{
  step_active.value=0;
}

//endregion

//#region 情形引导

//选择了申报类型后才可以进入下一步

const selectSblx = (data) => {
  sblx.value = data.value;
  console.log(sblx.value);
  if (sblx.value) {
    qxyd_is_ok.value = true;
    getAreaList(data.value.id);
    // areaList.value = [
    //   { id: "1", areaName: "黄州区" },
    //   { id: "2", areaName: "麻城市" },
    //   { id: "3", areaName: "罗田市" },
    // ];
  }
};

//endregion

//#region 条件预检

/**进行区域选择弹窗**/
const handleSelectArea = () => {
  showDialog.value = true;
  dialogType.value = 1;
  dialogTitle.value = "选择区域";
};

/**获取区域列表**/
const getAreaList = (registerType) => {
  getAllAreas(registerType).then((res) => {
    areaList.value = res.data || [];
  });
};

//endregion

//#region 智能填表部分代码
const iframeUrl = ref("");

//处理智能填表的功能
const handleZntb = () => {
  showDialog.value = true;
  dialogType.value = 2;
  dialogTitle.value = "智能填表";
  dialogWidth.value = "80%";

  iframeUrl.value =
    selectedArea.value.ext4 +
    "/jwsb/guideBcyjs?from=3&userinfo=" +
    userinfo.value;
  //"http://uias.qxytech.cn/jwsb/guideBcyjs?from=3&userinfo="+userinfo.value;
  // iframeUrl.value =
  //   "http://localhost:8010/jwsb/guideBcyjs?from=3&userinfo="+userinfo.value;

  dialogShowControlBtn.value = true;
};

const handleLjtb = () => {
  handleZntb();
};

const onCompleteIframeFormHandle = (data) => {
  cancel();
  debugger;
  console.log("select area is:" + data.info);
  if (data.info) {
    thirdRegsiterInfo.value = data.info;
    registerBh.value = data.info.bh;
    registerId.value = data.info.userId;

    //进行信息保存，保存完成后显示下一步
    saveRegisterInfoApi();
  }
};

const saveRegisterInfoApi = () => {
  let saveData = {
    areaCode: selectedArea?.value.areaCode,
    areaRegisterNo: "",
    thirdRegisterNo: registerId.value,
    // "syncSendFlag":"1",
    registerName: thirdRegsiterInfo.value.registerName,
    registerIdNumber: thirdRegsiterInfo.value.registerIdNumber,
    registerTime: "",
    registerType: sblx.value.id,
    registerTypeName: sblx.value.registerType,
    ext2: selectedArea?.value.ext4,
    ext4: selectedArea?.value.areaImg,
  };

  let data = JSON.stringify(saveData);

  zntbLoading.value = true;
  saveRegisterInfo(data).then((resp) => {
    completeOk.value = true;
    debugger;
    areaRegisterNo.value = resp.data.areaRegisterNo;
    bjbh.value = resp.data.ext3;
    registerNoStatus.value = resp.data.syncSendFlag;
    zntbLoading.value = false;
  });
};

//endregion

//#region 导航到新页面
import { useRouter } from "vue-router";

const router = useRouter();

const openNewPage = (openPageType) => {
  // 假设你要跳转到的路径是 /about
  const { href } = router.resolve({ path: "/" + openPageType });
  window.open(href, "_blank");
};
//#endregion
</script>

<style>
.main-content {
  display: flex;
  flex-direction: column;
}

/**.el-step__head */
.main-step-container .el-step__head.is-success {
  border-color: #4269db;
  color: #4269db;
}

/* 报填须知开始 */

.tbxz {
  flex: 1;
}

.tbxz .tbxz-container {
  width: 1300px;
  margin: 0 auto 80px;
  -webkit-box-shadow: 0 1px 6px rgba(120, 137, 184, 0.25);
  box-shadow: 0 1px 6px rgba(120, 137, 184, 0.25);
  padding: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tbxz-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 0;
}

.tbxz-container .tbxz-header {
  display: flex;
  justify-content: center;
  border-bottom: 1px #c0c4cc solid;
  font-size: large;
}

.tbxz-container .xz-content {
  height: 400px;
}

.tbxz-container .tbxz-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tbxz-container .tbxz-footer .item {
  margin-top: 10px;
}

.tbxz-container .tbxz-footer.prenext {
  display: flex;
  flex-direction: row !important;
  justify-content: center;
}

/* 报填须知结束 */

/* 引导条开始 */
.main-step-container {
  padding: 0px 10px;
  display: flex;
  justify-content: center;
}

.main-step {
  width: 1300px;
  /* max-width: 100%; */
  /* min-width: 800px; */
  margin: 32px 0px;
}

.main-step .el-step__line {
  top: 50% !important;
  background: #eaebef;
  -webkit-transform: scaleX(0.6);
  transform: scaleX(0.6);
}

.main-step .el-step__line {
  position: absolute;
  border-color: inherit;
  background-color: #c0c4cc;
}

.main-step .is-process .el-step__icon {
  color: #fff !important;
  background: #4269db;
  border-width: 0;
}

.main-step .el-step__title.is-success {
  color: #000 !important;
}

.main-step .el-step__title.is-process {
  color: #4269db !important;
  font-weight: normal !important;
}

.main-step .el-step__icon-inner {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}

.main-step .el-step__head .el-step__icon .el-step__icon-inner {
  font-size: 24px;
  font-weight: 400;
}

.main-step .el-step__head .el-step__icon {
  padding: 12px;
  width: 24px;
  height: 24px;
  color: rgba(0, 0, 0, 0.25);
  font-weight: 700;
  line-height: 24px;
  font-family: PingFang SC;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  border-width: 1px;
}

/* 引导条结束 */

/* 办事指南开始 */
.top_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-evenly;
  font-weight: 700;

  margin: none;
  margin-bottom: 40px;
}

.top_box .gg {
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 300px;
  height: 88px;
  box-shadow: 0 0 8px 0 rgba(214, 219, 231, 0.8);
  border-radius: 10px;
  cursor: pointer;
}

.top_box .gg img {
  padding: 0px 15px;
}

/* 办事指南结束 */
</style>